WDV221 Intro Javascript

Skill Test - Event Handlers

Overview:

Event handlers 'listen' for user driven activity on a web page. When they 'hear' the specified activity they activate or 'fire'. Developers use them to trigger activity and functionality on a web page. Event handlers most often call a JavaScript function to perform the activity.

This type of development/programming is called 'Event Driven'. If the user doesn't trigger the Event with their actions then it will not run. A lot of the functionality of a web page is event driven based upon the activity of the user and how they are interacting with the content of the web page. This is part of the User Experience for the customer of the web page.

There are three ways to apply event handlers. You can apply event handlers using HTML and/or JavaScript. Each of the methods have their own syntax, rules and expectations. Each method has its own advantages and disadvantages. Choosing which method to apply an event handlers can be impacted by a number of things.

The methods of applying event handlers

• HTML event handler attributes
• Using the event properties of a JavaScript object: object.onclick=""
• Applying the addEventListener() to a JavaScript object

Your Assignment:

1. Apply the designated type of event handler for the following buttons
2. Use the click event for all buttons
3. All buttons will call the SAME buttonResponse()
4. Use a parameter to customize the message to identify which button was clicked

HTML Event Handler

Javascript click property

Apply an eventListener to this button

Note: You may change the HTML as needed to complete your task.